<template>
	<Teleport :to="`#vue-app`">
			<transition name="el-zoom-in-center">
		<div
			aria-hidden="true"
			class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
			role="tooltip"
			data-popper-placement="bottom"
			:style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
			:key="Math.random()"
			v-show="state.isShow"
		>
			<ul class="el-dropdown-menu">
				<template v-for="(item, index) in menuItems" :key="index">
					<li
						class="el-dropdown-menu__item"
						aria-disabled="false"
						tabindex="-1"
						v-if="!item.affix"
						@click="onCurrentContextmenuClick(item)"
					>
						<SvgIcon :name="item.icon" />
						<span>{{ $t(item.txt) }}</span>
					</li>
				</template>
			</ul>
			<div class="el-popper__arrow" :style="{ left: `${state.arrowLeft}px` }"></div>
		</div>
	</transition>
	</Teleport>

</template>

<script setup lang="ts" name="layoutTagsViewContextmenu">
import { computed, reactive, onMounted, onUnmounted, watch } from 'vue';

interface MenuItem {
  id: string | number;
  txt: string;
  icon: string;
  affix?: boolean;
  // 可根据需要添加其他字段
}

// 定义父组件传过来的值
const props = defineProps({
	dropdown: {
		type: Object,
		default: () => ({ x: 0, y: 0 })
	},
	menuItems: {
		type: Array as () => MenuItem[],
		default: () => [
			{ id: 0, txt: 'message.common.refresh', affix: false, icon: 'ele-RefreshRight' },
			{ id: 1, txt: 'message.tagsView.close', affix: false, icon: 'ele-Close' },
			{ id: 2, txt: 'message.tagsView.closeOther', affix: false, icon: 'ele-CircleClose' },
			{ id: 3, txt: 'message.tagsView.closeAll', affix: false, icon: 'ele-FolderDelete' },
			{ id: 4, txt: 'message.tagsView.fullscreen', affix: false, icon: 'iconfont icon-fullscreen' }
		]
	}
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['currentContextmenuClick']);

// 定义变量内容
const state = reactive({
	isShow: false,
	item: {} as RouteItem,
	arrowLeft: 10,
});

// 父级传过来的坐标处理（保持不变）
const dropdowns = computed(() => {
	if (props.dropdown.x + 117 > document.documentElement.clientWidth) {
		return {
			x: document.documentElement.clientWidth - 117 - 5,
			y: props.dropdown.y,
		};
	} else {
		return props.dropdown;
	}
});

// 点击事件传递整个菜单项
const onCurrentContextmenuClick = (item: MenuItem) => {
	emit('currentContextmenuClick', {
		menuItem: item,
		contextItem: state.item
	});
};

// 打开菜单时接收当前上下文项
const openContextmenu = (item: RouteItem) => {
	state.item = item;
	state.isShow = true;
};
// 关闭右键菜单
const closeContextmenu = () => {
	state.isShow = false;
};
// 监听页面监听进行右键菜单的关闭
onMounted(() => {
	document.body.addEventListener('click', closeContextmenu);
});
// 页面卸载时，移除右键菜单监听事件
onUnmounted(() => {
	document.body.removeEventListener('click', closeContextmenu);
});
// 监听下拉菜单位置
watch(
	() => props.dropdown,
	({ x }) => {
		if (x + 117 > document.documentElement.clientWidth) state.arrowLeft = 117 - (document.documentElement.clientWidth - x);
		else state.arrowLeft = 10;
	},
	{
		deep: true,
	}
);

// 暴露变量
defineExpose({
	openContextmenu,
  closeContextmenu,
});
</script>

<style scoped lang="scss">
.custom-contextmenu {
	transform-origin: center top;
	z-index: 2190;
	position: fixed;
	.el-dropdown-menu__item {
		font-size: 12px !important;
		white-space: nowrap;
		i {
			font-size: 12px !important;
		}
	}
}
</style>
